<template>
	<div class="main">
		<ul v-show="querySuccess && list.length">
			<li v-for="item in list">
				<div>
					<h2><span>{{ item.prizeShortName }}</span></h2>
					<div>
						<p class="name">{{ item.prizeName.split(item.prizeShortName)[1] || item.prizeName }}</p>
						<p>
							<span>中奖时间：</span>
							<span>{{ item.lotteryTime.split(' ')[0] }}</span>
						</p>
						<p>
							<span>发放时间：</span>
							<span v-if="item.sendStatus === 0">借款成功后发放</span>
							<span v-if="item.sendStatus === 1">{{ item.sendTimeString.split(' ')[0] }}</span>
						</p>
					</div>
					<i v-if="item.sendStatus === 0" class="icon">待发放</i>
				</div>
			</li>
		</ul>
		<div v-show="querySuccess && !list.length" class="empty">
			<img src="//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/prize.png" alt="prize">
			<p>还没有抽到奖品哦～</p>
		</div>
	</div>
</template>

<script>
	export default {
		'name': 'view-other_static-double_eleven_award',
		'metaInfo': {
			'title': '上市送红包'
		},
		data() {
			return {
				'token': this.$getCookie('huankachaoren'),
				'querySuccess': false,
				'list': [],
				'dynData': {
					'shareData': null,
					'bkg': []
				}
			};
		},
		'methods': {
			getDynamicData() {
				let millisecondsPerSecond = 1000,
					secondsPerMinute = 60,
					minutesPerVersion = 5;
				let dynamicScriptDelay = 500;
				let $dynamicScript = document.createElement('script');
				$dynamicScript.type = 'text/javascript';
				$dynamicScript.async = true;
				$dynamicScript.src = `${document.location.protocol}//hh.ppdaicdn.com/static/scripts/other_static/double_eleven.js
					?v=${parseInt(new Date().getTime() / millisecondsPerSecond / secondsPerMinute / minutesPerVersion, 10)}`;
				document.body.appendChild($dynamicScript);
				this.dynData = window.dynData || this.dynData;
				if (!this.dynData.shareData || !this.dynData.bkg.length) {
					setTimeout(() => {
						this.getDynamicData();
					}, dynamicScriptDelay);
					return;
				}
				this.showShare();
			},
			showShare() {
				try {
					window.AppBridge.shareData(JSON.stringify(this.dynData.shareData));
				} catch(ex) {
					console.log('需要在APP中使用');
				}
			},
			getAward() {
				this.$post('/api/activity/listRecord.htm', {}).then(data => {
					if (data.result !== 0) {
						this.querySuccess = true;
						return;
					}
					this.list = data.content || [];
					this.querySuccess = true;
				}, () => {
					console.log('请求失败，请稍后再试');
				});
			}
		},
		created() {
			this.getDynamicData();
			this.getAward();
		}
	};
</script>

<style scoped type="text/scss">
	ul {
		margin: 6% 7.6%;
		padding: 0;
		list-style-type: none;
		li {
			position: relative;
			margin: 3.47% 0;
			&::after {
				content: "";
				display: block;
				padding-top: 35.2756%;
			}
			> div {
				position: absolute;
				top: 0;
				left: 0;
				width: 96.2204%;
				height: 88.8393%;
				padding: 1.4173% 1.8898% 2.5197%;
				background: url(//hh.ppdaicdn.com/static/images/other_static/shuangshiyi/award.png) center no-repeat;
				background-size: cover;
				h2,
				p {
					margin: 0;
					color: #ffffff;
				}
				h2 {
					display: flex;
					flex-flow: column nowrap;
					justify-content: center;
					float: left;
					width: 27.0492%;
					height: 100%;
					text-align: center;
					font-size: 25px;
				}
				> div {
					display: flex;
					flex-flow: column nowrap;
					justify-content: space-around;
					overflow: hidden;
					height: 75%;
					padding: 4.0983% 9.5082%;
				}
				p {
					overflow: hidden;
					font-size: 12px;
					white-space: nowrap;
					text-overflow: ellipsis;
					&.name {
						font-size: 18px;
					}
				}
				i {
					position: absolute;
					top: 18%;
					right: 6%;
					height: 20px;
					padding: 0 1em;
					border-radius: 10px;
					color: #fe6a59;
					font-style: normal;
					font-size: 12px;
					line-height: 20px;
					background-color: #ffffff;
				}
			}
		}
	}
	.empty {
		position: absolute;
		top: 35%;
		left: 0;
		width: 100%;
		color: #606060;
		text-align: center;
		img {
			display: block;
			width: 22%;
			margin: 0 auto;
		}
	}
</style>
